<template>
  <div class="mod-home">
    <head-count></head-count>
    <container-count style="margin-top: 20px;" :containerList="containerList"></container-count>
    <unit-count style="margin-top: 20px;" :carList="carList"></unit-count>
    <car-count style="margin-top: 20px;" :carList="carList"></car-count>
  </div>
</template>

<script>
import HeadCount from './components/head-count.vue'
import CarCount from './components/car-count.vue'
import ContainerCount from './components/container-count.vue'
import UnitCount from './components/unit-count.vue'

export default {
  components: { HeadCount, CarCount, ContainerCount, UnitCount },
  data () {
    return {
      containerList: [],
      carList: []
    }
  },
  mounted () {
    this.getContainerList()
    this.getCarList()
  },
  methods: {
    getContainerList() {
      this.$http({
        url: this.$http.adornUrl('/sign/signcontainer/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: -1
        })
      }).then(({ data }) => {
        if (data && data.page.list) {
          this.containerList = data.page.list
        } else {
          this.containerList = []
        }
      });
    },
    getCarList() {
      this.$http({
        url: this.$http.adornUrl('/sign/signcar/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: -1
        })
      }).then(({ data }) => {
        if (data && data.page.list) {
          data.page.list.forEach(e => {
            if (e.driver) {
              e.numberPlate = e.numberPlate + ' (' + e.driver.username + ')'
            }
          });
          this.carList = data.page.list
        } else {
          this.carList = []
        }
      });
    }
  }
}
</script>
